<template>
	<view class="con-box">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#fff" size="26"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">
					产品详情
				</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right">
					<view class="backImg-right">
						<!-- <image @tap="collectionChange(1)" v-if="!myGoodsDetails.isCollection" src="../../static/common/collection.png" mode=""></image> -->
						<!-- <image @tap="collectionChange(2)" v-else src="../../static/common/collection_active.png" mode=""></image> -->
						
						<image @tap="shareFx" class="share" src="../../static/common/share.png" mode=""></image>
					</view>
				</view>
			</view>
		</u-navbar>
		
		<view class="goods-image">
			<view v-if="setImgShow(myGoodsDetails) == 1">
				<image class="img" :src="myGoodsDetails.coverImg" mode="scaleToFill">
				</image>
			</view>
			<view v-else-if="setImgShow(myGoodsDetails) == 2">
				<video class="videoBox" :enable-progress-gesture="false" :src="myGoodsDetails.coverImg" muted
					:autoplay="false" :controls="false" loop></video>
			</view>
			<view v-else-if="setImgShow(myGoodsDetails) == 3">
				<view class="mask"></view>
				<iframe class="iframeBox" :src="`/hybrid/html/3d.html?modelUrl=${myGoodsDetails.coverImg}`"></iframe>
				<image @tap="model3dShow = true;stop()" class="model3d" src="../../static/detail/model3d.png" mode="widthFix"></image>
			</view>
		</view>
		
		<view class="goods-desc">
			<view class="goods_details">
				<view class="title">
					<view>{{myGoodsDetails.collName}}</view>
					<view v-for="(item,i) in myGoodsDetails.labelList" :key="i">{{item}}</view>
					
				</view>
				<view class="name">
					<text class="castNameS">{{myGoodsDetails.nickname}}</text>
					<view>
						<image v-if="setImgShow(myGoodsDetails) == 1" src="@/static/home/fileType1.png" mode="widthFix"></image>
						<image v-else-if="setImgShow(myGoodsDetails) == 2" src="@/static/home/fileType2.png" mode="widthFix"></image>
						<image v-else-if="setImgShow(myGoodsDetails) == 3" src="@/static/home/fileType3.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			
			<view class="infoBox">
				<view class="code">
					<view class="lCont">
						产品编号<text>#{{myGoodsDetails.sortSn}}/{{myGoodsDetails.castingAmount}}</text>
					</view>
					<view class="rCont" @tap="codeShow = true">
						<text>其他编号</text>
						<u-icon name="arrow-right" color="#414141" size="30upx"></u-icon>
					</view>
				</view>
				<view>合约地址<text>{{myGoodsDetails.treatyAddress}}</text></view>
				<view class="code"> <!-- @tap="goSeriesDetail" -->
					<view class="lCont">
						所属系列<text>{{myGoodsDetails.seriesName}}</text>
					</view>
					<!-- <view class="rCont">
						<u-icon name="arrow-right" color="#414141" size="30upx"></u-icon>
					</view> -->
				</view>
			</view>
			
			<view class="scrollIssuer">
				<view class="holder-info dfs">
					<view class="contLeft">
						<image class="img" :src="myGoodsDetails.issuerHeads" mode="scaleToFill"></image>
						<view class="desc">
							<view class="desc_1">{{myGoodsDetails.issuerNames || "----"}}<text>发行方</text></view>
							<!-- <view class="desc_2">{{myGoodsDetails.issuerNames}}</view> -->
						</view>
					</view>
					<!-- <u-icon name="arrow-right" color="#414141" size="30upx"></u-icon> -->
				</view>
				
				<view class="holder-info dfs">
					<view class="contLeft">
						<image class="img" :src="myGoodsDetails.issuerHeads" mode="scaleToFill"></image>
						<view class="desc">
							<view class="desc_1">{{myGoodsDetails.nickname || "----"}}<text>持有方</text></view>
							<!-- <view class="desc_2">{{myGoodsDetails.issuerNames}}</view> -->
						</view>
					</view>
					<!-- <u-icon name="arrow-right" color="#414141" size="30upx"></u-icon> -->
				</view>
			</view>
			
			<view class="image-desc">
				<view class="title">
					<text>产品详情</text>
				</view>
				<view class="show-image">
					<image v-for="(item,index) in myGoodsDetails.applyInfoList" :key="index" mode="widthFix" class="img"
						:src="item"></image>
				</view>
			</view>
			
			<view class="image-desc">
				<view class="title1">
					<text class="name">流转记录</text>
					<text class="more" @tap="show1 = true">查看更多</text>
				</view>
				
				<view v-for="(item,index) in recordList.slice(0,6)" :key="index">
					<view class="circulationRecord" v-if="item.sellTime">
						<view class="lCont">
							<text class="date">{{item.sellTime}}</text>
						</view>
						<view class="rCont">出售</view>
					</view>
					<view class="circulationRecord">
						<view class="lCont">
							<text class="tag">上链时间</text>
							<text class="date">{{item.created}}</text>
						</view>
						<view class="rCont">受让</view>
					</view>
				</view>
				
				<view class="circulationRecord">
					<view class="lCont1">
						<text class="name">中国数字图书馆</text>
						<text class="date">{{itemDetails.startTime}}</text>
					</view>
					<view class="rCont1">发售</view>
				</view>
				<view class="circulationRecord noBorder">
					<view class="lCont1">
						<text class="name">中国数字图书馆</text>
						<text class="date">{{myGoodsDetails.created}}</text>
					</view>
					<view class="rCont1">发布</view>
				</view>
			</view>
			
		</view>
		
		<view class="operating">
			<view class="footBox">
				<view class="priceCont" v-if="marketInfo.isopen">
					<view class="price">
						<text>￥</text>
						{{myGoodsDetails.price || 0}}
					</view>
				</view>
				<view class="footDate" v-else>
					<view>开市时间：工作日9:00至17:00</view>
					<text>下个转让日：{{marketInfo.nextDate}}</text>
				</view>
				<view class="buttS">
					<view class="shopping0" v-if="myGoodsDetails.sellStatus == 1&&marketInfo.isopen">
						<view @tap="operation(1)">立即购买</view>
					</view>
					<view class="shopping1"  v-else-if="myGoodsDetails.sellStatus == 2&&marketInfo.isopen">排队中</view>
					<view class="shopping1"  v-if="!marketInfo.isopen">闭市中</view>
				</view>
			</view>
		</view>
		
		<mix-loading ref="min_loading"></mix-loading>
		<u-toast ref="uToast" />
		
		<u-popup :show="show" bg-color="#141414" :customStyle="{width:'620upx'}" mode="center">
			<view class="guanbi" @tap="show = false"></view>
			<view class="shop-tips">
				<view class="tip-title">您将下架当前作品！</view>
				<view class="tip-text">
					<view class="text" @tap="show = false">
						点错了
					</view>
					<view class="text1" @tap="confirm">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="showModal" bg-color="#141414" :customStyle="{width:'620upx'}" mode="center">
			<view class="guanbi" @tap="showModal = false"></view>
			<view class="shop-tips">
				<view class="tip-title">确定要取消关注吗！</view>
				<view class="tip-text">
					<view class="text" @tap="showModal = false">
						点错了
					</view>
					<view class="text1" @tap="confirm1">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 流转记录 -->
		<u-popup :closeable="true" mode="bottom" :show="show1" @close="close" :round="0">
			 <view class="prize">
				<view class="prizeTitle">流转记录</view>
				<view class="prizeBox">
					<scroll-view @scrolltolower="scrolltolower" scroll-y="true" style="width: 100%;height: 540upx;">
						<view class="prizeList">
							<view v-for="(item,index) in recordList" :key="index">
								<view class="prizeItem" v-if="item.sellTime">
									<view class="prizeText prizeRecord">
										<view>{{item.sellTime}}</view>
									</view>
									<view class="prizeText1">出售</view>
								</view>
								<view class="prizeItem">
									<view class="prizeText prizeRecord">
										<view><text>上链时间</text>{{item.created}}</view>
									</view>
									<view class="prizeText1">受让</view>
								</view>
							</view>
							
							<view class="prizeItem">
								<view class="prizeText nameCt">
									<text>中国数字图书馆</text>
									<view>{{itemDetails.startTime}}</view>
								</view>
								<view class="prizeText1">发售</view>
							</view>
							<view class="prizeItem">
								<view class="prizeText nameCt">
									<text>中国数字图书馆</text>
									<view>{{myGoodsDetails.created}}</view>
								</view>
								<view class="prizeText1">发布</view>
							</view>
							
						</view>
						<view class="msg" v-if="isEnd">— 没有更多了 —</view>
					</scroll-view>
				</view>
			 </view>   
		</u-popup>
		
		<!-- 全部编号 -->
		<u-popup :closeable="true" mode="bottom" :show="codeShow" @close="close" :round="0">
			 <view class="prize">
				<view class="prizeTitle">全部编号</view>
				<view class="prizeBox">
					<scroll-view @scrolltolower="scrolltolower1" scroll-y="true" style="width: 100%;height: 540upx;">
						<view class="prizeList">
							<view class="codeItem" v-for="(item,index) in codeList" :key="index">
								<view class="codeCont">
									<text>#{{item.sortSn}}/{{item.castingAmount}}</text>
									<view class="price">售价<text>￥</text>{{item.price}}</view>
								</view>
								<view class="status">
									<!-- status1 -->
									<text>{{item.sellStatus==1?"在售":"排队中"}}</text>
								</view>
							</view>
							<view class="noData" v-if="codeList.length == 0">
								<image class="noDataImg" src="../../static/noData.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="msg" v-if="isEnd1&&codeList.length != 0">— 没有更多了 —</view>
					</scroll-view>
				</view>
			 </view>   
		</u-popup>
		
		<!-- 二维码分享 -->
		<u-popup :show="show2" :customStyle="popupStyle" mode="center" @close="show2 = false">
			<view class="share-content">
				<view class="imgBlob" v-if="imgBlobData !== ''">
					<image :src="imgBlobData" mode="widthFix">
					</image>
					<text class="msg">长按保存到相册</text>
					<view class="guanbi" @tap="show2 = false;imgBlobData = ''"></view>
				</view>
				<view class="detailBox" id="share" v-show="imgBlobData == ''">
					<view class="cardBox">
						<image v-if="isImage(myGoodsDetails.fileUrl)" :src="myGoodsDetails.fileUrl"
							mode="scaleToFill" class="img"></image>
						<image v-else :src="myGoodsDetails.fileUrl+'?x-oss-process=video/snapshot,t_0,f_jpg'"
							mode="scaleToFill" class="img"></image>
					</view>
					<view class="info-box">
						<view class="desc_1">
							<view class="desc_1_1">
								<text>{{myGoodsDetails.nickname}}</text>
							</view>
							<!-- <view class="desc_1_2">限量&nbsp;|&nbsp;{{myGoodsDetails.quotaNumber?myGoodsDetails.quotaNumber:"1"}}份</view> -->
						</view>
						<view class="desc_3">
							<view class="desc_3_2">
								<view class="headList">
									<image class="headItem" :src="myGoodsDetails.issuerHeads" mode="scaleToFill"></image>
									<text>{{myGoodsDetails.issuerNames}}</text>
								</view>
								<view class="source">￥<text>{{myGoodsDetails.price || 0}}</text></view>
							</view>
						</view>
						<view class="desc_4">
							<view class="logo">
								<image src="@/static/login/logo.png" mode="heightFix" class="img"></image>
								<text>中天富转让平台</text>
							</view>
							<view class="desc_4_2">
								<view class="desc_4_2_1" ref='desc_4_2_1'>
									<canvas id="qrcode" canvas-id="qrcode" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="save-share" v-show="imgBlobData == ''">
				<view class="shareTypeTitle">分享到</view>
				<view class="shareType">
					<view @tap="shareType(1)">
						<image src="@/static/detail/share1.png" mode="heightFix"></image>
						<view>复制链接</view>
					</view>
					<view @tap="shareType(2)">
						<image src="@/static/detail/share2.png" mode="heightFix"></image>
						<view>保存图片</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="payShow" bg-color="#141414" mode="bottom">
			<view class="payPasTitle" v-if="showType == 2">
				<text>转让密码</text>
				<u-icon name="close" class="closeIcon" color="#999" @tap="guanbi" size="34upx"></u-icon>
			</view>
			<view class="modeTitle" v-else>
				<text>购买确认</text>
				<u-icon name="close" color="#fff" @tap="guanbi" size="34upx"></u-icon>
			</view>
			<view class="shop-tips" :style="{'min-height':showType==2?'620upx':'760upx'}">
				<view class="tip-image step1" v-if="showType == 0">
					<u-loading-icon inactive-color="red" size="80upx" color="#352070"></u-loading-icon>
					<text>转让请求中...</text>
					<!-- <text v-if="isKeepWaiting">{{copywriting}}</text> -->
				</view>
				
				<view class="tip-image step3" v-else-if="showType == 2">
					<view class="password">
						<view class="flex">
							<view class="password_num" v-for="(item,index) in miney_list">
								<view class="inputCont" v-if="item.id == index">
									<view v-for="(res,i) in payPas.payPsw.length" v-show="i == index">
										<view class="miney_data"></view>
									</view>
								</view>
							</view>
						</view>
						<input v-model="payPas.payPsw" :focus="payPas.setFocus" maxlength="6" type="number" value="123" @input="input_num">
					</view>
				</view>
				
				<view class="tip-image step2" v-else>
					<view class="tips">本商品一经售出，不支持退换，本产品源文件不支持本地下载。</view>
					<view class="goods">
						<image v-if="isImage(myGoodsDetails.fileUrl)" :src="myGoodsDetails.fileUrl"
							mode="scaleToFill" class="img"></image>
						<image v-else :src="myGoodsDetails.fileUrl+'?x-oss-process=video/snapshot,t_0,f_jpg'"
							mode="scaleToFill" class="img"></image>
						<view class="info">
							<view class="name">{{myGoodsDetails.collName}}</view>
							<text>产品ID{{myGoodsDetails.id}}</text>
						</view>
					</view>
					
					<view class="items">
						<text>接收地址</text>
						<view class="address">{{userData.blockchainAccount}}</view>
					</view>
					<view class="items">
						<text>售价</text>
						<view class="price">￥{{Number(myGoodsDetails.price).toFixed(2)}}</view>
					</view>
					<view class="items">
						<text>支付总金额</text>
						<view class="price">￥{{Number(moneyAll).toFixed(2)}}</view>
					</view>
					<view class="items">
						<text>钱包余额</text>
						<view class="myMoney">余额￥{{Number(userAccount.subAccountMoney).toFixed(2)}}</view>
					</view>
					<view class="itemBox">
						<view>平台手续费<u-icon @tap="tipsShowFn(1)" class="iconfs" name="question-circle" color="#999" size="30upx"></u-icon></view>
						<text>￥{{Number(serviceCharge.buyMoney).toFixed(2)}}</text>
					</view>
					<view class="itemBox">
						<view>版权费<u-icon @tap="tipsShowFn(2)" class="iconfs" name="question-circle" color="#999" size="30upx"></u-icon></view>
						<text>￥{{Number(serviceCharge.buyCopyrightMoney).toFixed(2)}}</text>
					</view>
					<view class="itemBox">
						<view>发行方服务费<u-icon @tap="tipsShowFn(3)" class="iconfs" name="question-circle" color="#999" size="30upx"></u-icon></view>
						<text>￥{{Number(serviceCharge.buyIssueMoney).toFixed(2)}}</text>
					</view>
				</view>
				
				<view class="footBn" v-if="showType == 1">
					<view class="style1" v-if="moneyAll>Number(userAccount.subAccountMoney)">余额不足，请先去充值</view>
					<view class="style2" @tap="payGoods" v-if="moneyAll<Number(userAccount.subAccountMoney)">下一步输入转让密码</view>
				</view>
				
				<view class="footBn" v-else-if="showType == 401">
					<view class="style2" @tap="tocertification(1)">前往登录</view>
				</view>
				<view class="footBn" v-else-if="showType == 4">
					<view class="style2" @tap="tocertification(2)">立即实名认证</view>
				</view>
				<view class="footBn" v-else-if="showType == 801">
					<view class="style2" @tap="tocertification(3)">前往开户</view>
				</view>
				<view class="footBn" v-else-if="showType == 802">
					<view class="style2" @tap="tocertification(4)">绑定银行卡</view>
				</view>
				<view class="footBn" v-else-if="showType == 100">
					<view class="style2" @tap="tocertification(5)">设置支付密码</view>
				</view>
				<view class="footBn" v-else-if="showType == 3">
					<view class="style1">很抱歉您未获得此作品，请下次再试。</view>
				</view>
				<view class="footBn" v-else-if="showType == 5">
					<view class="style1">已售罄</view>
				</view>
				<view class="footBn" v-else-if="showType == 6">
					<view class="style1">{{resMsg}}</view>
				</view>
				<view class="footBn" v-else-if="showType == 7">
					<view class="style1">已到达领取/购买上限</view>
				</view>
				<view class="footBn" v-else-if="showType == 8">
					<view class="style1">抱歉,未成年人暂时不能购买/领取数字版权作品</view>
				</view>
				<view class="footBn" v-else-if="showType == 2">
					<view :class="[payPas.payPsw.length==6?'style2':'style1']" @tap="payment">确认支付</view>
				</view>
			</view>
		</u-popup>
		
		<!-- //3d模型 -->
		<u-popup :show="model3dShow" @close="model3dShow = false;move()" bgColor="transparent" mode="center" round="20upx">
			<view class="model3dPopup">
				<iframe class="iframeBox" :src="`/hybrid/html/3d.html?modelUrl=${myGoodsDetails.coverImg}`"></iframe>
			</view>
		</u-popup>
		
		<u-toast ref="uToast"></u-toast>
		<u-popup :show="tipsShow" :round="10" :customStyle="{width:'620upx'}" mode="center">
			<view class="shop-tipsBox">
				<view class="tip-title">{{tipsTitle}}</view>
				<view class="tip-text">
					<view class="text" @tap="tipsShow = false">知道了</view>
				</view>
			</view>
		</u-popup>
		<view class="toastBox" v-show="errMsgShow">{{errMsg}}</view>
	</view>
</template>

<script>
	import {
		nftresaleorders,resaleOrderPay,getMarketInfo,getNftresalepaying,getSeriesCollInfo
	} from '@/api/home.js'
	import {getGoodsDetail,offGoods,nftresaleorder,nftuserlike,getAccountData,countService,getNftuserdetaillogList} from '@/api/user.js'
	// import {
	// 	colorRgb
	// } from "@/common/util.js"
	import html2canvas from "html2canvas";//绘制图片
	import uQRCode from '@/common/uqrcode.js'//生成二维码

	export default {
		data() {
			return {
				itemDetails:{},
				tipsTitle:"",
				tipsShow:false,
				model3dShow:false,
				marketInfo:{},
				//转让
				showType:1,
				payShow:false,
				serviceCharge:{
					buyMoney:0,//买方平台服务费
					buyCopyrightMoney:0,//买方版权服务费
					buyIssueMoney:0,//发行方服务费
				},
				miney_list: [
					{id: 0,name: ''},
					{id: 1,name: ''},
					{id: 2,name: ''},
					{id: 3,name: ''},
					{id: 4,name: ''},
					{id: 5,name: ''},
				],
				moneyAll:0,
				userAccount:{},
				errMsg:"",
				errMsgShow:false,
				errMsgTime:null,
				payPas:{
					orderId:"",
					type:"3",
					payPsw:"",
					setFocus:false,
				},
				// 分享
				show2:false,
				imgBlobData:"",
				//全部编号
				codeShow:false,
				codeList:[],
				listQuery1: {
					page: 1,
					pageSize: 10,
					pages:1,
					total:0,
					castingId:"",
					priceSort:"1",
					sellStatus:"",
				},
				isEnd1:false,
				//流转记录
				recordList:[],
				listQuery: {
					page: 1,
					pageSize: 10,
					pages:1,
					detailId:"",
				},
				isEnd:false,
				show1:false,
				pathId:"",
				followShow:true,
				show: false,
				showModal: false,
				popupStyle: {
					height: "1216upx",
					width: "670upx",
					background: "rgba(0,0,0, 0)"
				},
				myGoodsDetails: {
					isCollection:false,
				},
				serial: null,
				issuerName: '',
				poster: {},
				posterImage: '',
				count: 0,
				rgb: null,
				goodsId:"",
				userId:"",
			};
		},
		onLoad(option) {
			this.getDetails(option.id,option.castingId);
		},
		onShow(){
			this.getAccount();
		},
		computed:{
			userData(){
			  let data = {};
			  if(this.$store.state.hasLogin && this.$store.state.uerInfo){
				data = this.$store.state.uerInfo;
			  }
			  return data;
			},
		},
		methods: {
			scrolltolower(){// 到达底部流转记录
				if(this.listQuery.pages > this.listQuery.page){
					this.listQuery.page++;
					this.getRecordData();
				}else{
					//this.isEnd = true;
				}
			},
			getRecordData(){//流转记录
				getNftuserdetaillogList(this.listQuery).then(res => {
					if (res.data.rows) {
						this.listQuery.pages = res.data.totalPage;
						
						let newList = res.data.rows.filter((item, index) => {
							return item;
						});
						
						if (this.listQuery.page == 1) {
							this.recordList = [...newList];
						} else {
							this.recordList = [...this.recordList,...newList];
						}
					}
				}).catch(err=>{
				});
			},
			// goSeriesDetail(){
			// 	uni.navigateTo({
			// 		url: '/pages/detail/seriesDetail?id=' + this.myGoodsDetails.castingId
			// 	});
			// },
			//禁止页面滑动
			stop(){
				  var box=function(e)
				  {passive: false ;};
				  document.body.style.overflow='hidden';
				  document.addEventListener("touchmove",box,false);
			},
			 //允许页面滑动
			move(){
				var box=function(e){passive: false };
				document.body.style.overflow='';//出现滚动条
				document.removeEventListener("touchmove",box,false);
			},
			tipsShowFn(i){
				if(i == 1){
					this.tipsTitle = "平台服务手续费！";
				}else if(i == 2){
					this.tipsTitle = "产品版权费！";
				}else if(i == 3){
					this.tipsTitle = "产品发行方服务费用！";
				}
				this.tipsShow = true;
			},
			// 到达底部
			scrolltolower1(){
				if(this.listQuery1.pages > this.listQuery1.page){
					this.listQuery1.page++;
					this.getSeriesList();
				}else{
					this.isEnd1 = true;
				}
			},
			getSeriesList(flag,i) {// 其他编号
				this.listQuery1.castingId = this.pathId;
				getNftresalepaying(this.listQuery1).then(res => {
					if (res.data.success) {
						this.listQuery1.pages = res.data.obj.pages;
						
						let newList = res.data.obj.list.filter((item, index) => {
							
							if(item.startTime){
								item.startTime = this.moment(item.startTime).diff(new Date().getTime())
							}
							return item;
						});
						if(res.data.obj.list.length == 0 || res.data.obj.list.length < 10){
							this.isEnd1 = true;
						}
						if (this.listQuery1.page == 1) {
							this.codeList = [...newList];
						} else {
							this.codeList = [...this.codeList,...newList];
						}
					}
				}).catch(err=>{
				});
			},
			//转让
			guanbi() {//关闭抢购弹窗
				this.payShow = false;
				this.showType = 1;
				this.payPas.payPsw = "";
				this.payPas.setFocus = false;
				this.isKeepWaiting = false;
			},
			operation(i){
				if(i == 1){//购买
					this.payShow = true;
					this.showType = 1;
					if(!this.$store.state.hasLogin){
						this.showType = 401;
						this.errMsg = "请先前往登录！";
						this.errMsgShow = true;
						this.errMsgHide();
						return;
					}
					if (this.$store.state.uerInfo.isRealName !== 1) {
						this.showType = 4;
						this.errMsg = "请先实名认证！";
						this.errMsgShow = true;
						this.errMsgHide();
						return;
					}
					if (!this.userAccount.payPsw) {
						this.showType = 100;
						this.errMsg = "请先设置支付密码！";
						this.errMsgShow = true;
						this.errMsgHide();
						return;
					}
				}else{//下架
					this.show = true;
				}
			},
			payGoods(){
				if(this.showType == 1){
					this.showType = 0;
					nftresaleorder({payingId:this.goodsId}).then(res => {
						if (res.data.success) {
							this.getResaleDetails(res.data.obj.id);
						}else{
							this.showType = 6;
							this.resMsg = res.data.msg;
							this.errMsg = res.data.msg;
							this.errMsgShow = true;
							this.errMsgHide();
							setTimeout(()=>{
								this.showType = 1;
							},2000);
						}
					}).catch(err=>{
						this.showType = 6;
						this.resMsg = "网络异常，请稍后重试！";
						this.errMsg = "网络异常，请稍后重试！";
						this.errMsgShow = true;
						this.errMsgHide();
						setTimeout(()=>{
							this.showType = 1;
						},2000);
					});
				}
			},
			getResaleDetails(id){//获取转售订单详情
				nftresaleorders({id}).then(res => {
					if (res.data.success) {
						let data = res.data.obj;
						this.showType = 2;
						this.payPas.payPsw = "";
						this.payPas.setFocus = true;
						this.payPas.orderId = res.data.obj.id;
						if (data.payStatus == 1) {
							this.$refs.uToast.show({
								type: 'success',
								message: "订单已支付成功！",
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
							});
							setTimeout(() => {
								uni.redirectTo({
									url:"/pages/user/myGoodsList"
								});
							}, 1500);
						}
					}else {
						this.showType = 6;
						this.resMsg = res.data.msg;
						this.errMsg = res.data.msg;
						this.errMsgShow = true;
						this.errMsgHide();
						setTimeout(()=>{
							this.showType = 1;
						},2000);
					}
				}).catch(err=>{
					this.showType = 6;
					this.resMsg = "网络异常，请稍后重试！";
					this.errMsg = "网络异常，请稍后重试！";
					this.errMsgShow = true;
					this.errMsgHide();
					setTimeout(()=>{
						this.showType = 1;
					},2000);
				});
			},
			payment(){
				if(this.payPas.payPsw.length < 6) {
					this.errMsg = "请输入正确的转让密码！";
					this.errMsgShow = true;
					this.errMsgHide();
					return;
				};
				let pas = this.hrymd5.md5(this.payPas.payPsw);
				
				resaleOrderPay({
					orderId:this.payPas.orderId,
					type:this.payPas.type,
					payPsw:pas,
				}).then(res => {
					if (res.data.success) {
						this.payShow = false;
						this.$refs.uToast.show({
							type: 'success',
							message: "购买成功",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
						});
						setTimeout(() => {
							uni.redirectTo({
								url:"/pages/detail/payment"
							});
						},1500);
					} else {
						this.errMsg = res.data.msg;
						this.errMsgShow = true;
						this.errMsgHide();
					}
				}).catch(err => {
					this.errMsg = "网络异常，请稍后重试！";
					this.errMsgShow = true;
					this.errMsgHide();
				});
			},
			input_num() {
				const that = this;
				that.miney_list.forEach((item, index) => {
					for (var i = 0; i < that.payPas.payPsw.length; i++) {
						if (i == index) {
							that.miney_list[index].name = '*';
						}
					}
				})
			},
			
			errMsgHide(){
				clearTimeout(this.errMsgTime);
				this.errMsgTime = setTimeout(()=>{
					this.errMsgShow = false;
				},2000);
			},
			
			getAccount(){//账户余额   //转售市场开闭市信息查询
				getAccountData({}).then(res => {
					if (res.data.success) {
						let data = res.data.obj;
						this.userAccount = data;
					} else {
						this.$u.toast(res.data.msg);
					}
				}).catch(err => {
					this.$u.toast('网络错误');
				});
				getMarketInfo({}).then(res => {
					if (res.data.success) {
						this.marketInfo = res.data.obj;
					} else {
						this.$u.toast(res.data.msg);
					}
				}).catch(err => {
					this.$u.toast('网络错误');
				});
			},
			
			// 分享
			shareType(i){
				if(i == 1){
					let urls = location.href;
					uni.setClipboardData({
					 	data: urls,
					    success: ()=> {
							this.show2 = false;
					    }
					});
				}else{
					this.goPoster();
				}
			},
			// 生成图片
			async goPoster() {
				this.$refs.min_loading.open("图片生成中...");
				this.download();
			},
			async download() {
				const convertToImage = (container, options = {}) => {
					// 设置放大倍数
					const scale = window.devicePixelRatio;
					// 传入节点原始宽高
					const _width = container.offsetWidth;
					const _height = container.offsetHeight;
					// html2canvas配置项
					const ops = {
						width: _width - 2,
						height: _height - 2,
						useCORS: true,
						x: 1,
						y: 1,
						// allowTaint: false,
						dpi: 300,
						scale
						//   ...options,
					};
					return html2canvas(container, ops).then((canvas) => {
						// 返回图片的二进制数据
						return canvas.toDataURL("image/png");
					});
				};
				const imgBlobData = await convertToImage(document.querySelector('#share'));
				this.imgBlobData = imgBlobData;
				// setTimeout(()=>{
				this.$refs.min_loading.close();
				// },2000);
			},
			async shareFx() {//生成分享二维码
				this.show2 = true;
				let urls = location.href;
				setTimeout(() => {
					let modules = uQRCode.getModules({
						text: urls,
						errorCorrectLevel: uQRCode.errorCorrectLevel.L
					})
					let tileSize = 2.2
					// 获取绘图所需的上下文
					let ctx = uni.createCanvasContext('qrcode', this)
					// 开始绘制
					ctx.setFillStyle('#FFFFFF')
					ctx.fillRect(0, 0, 67, 67);
					for (var row = 0; row < modules.length; row++) {
						for (var col = 0; col < modules.length; col++) {
							// 计算每一个小块的位置
							var x = col * tileSize
							var y = row * tileSize
							var w = tileSize
							var h = tileSize
			
							var style = modules[row][col] ? '#000000' : '#FFFFFF'
							ctx.setFillStyle(style)
							ctx.fillRect(x, y, w, h)
						}
					}
					ctx.draw()
					// setTimeout(() => {
					// 	this.share();
					// }, 500)
					return;
				}, 200)
			},
			
			close() {
				this.codeShow = false;
				this.show = false;
				this.show1 = false;
				this.isEnd = false;
				this.isEnd1 = false;
			},
			setImgShow(type){
				let n = "";
				if(type.coverImg){
					if((type.coverImg).indexOf(".mp4") !=-1){
						n = 2;
					}else if((type.coverImg).indexOf(".glb") !=-1){
						n = 3;
					}else{
						n = 1;
					}
				}
				
				return n;
			},
			
			// 确认下架
			confirm(){
				this.show = false;
				// 下架的接口
				let arr = [];
				offGoods({id:this.goodsId}).then(res => {
					if (res.data.success) {
						this.$refs.uToast.show({type: 'success',message:"下架成功！"});
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							});
						},500);
					}else{
						this.$u.toast(res.data.msg);
					}
				}).catch(err=>{
				});
			},
			collectionChange(i) {
				// 1发售2抢购3转售4用户
				nftuserlike({id:this.goodsId,type:3}).then(res => {
					if (res.data.success) {
						this.myGoodsDetails["isCollection"] = !this.myGoodsDetails["isCollection"];
						this.$u.toast(i==1?'收藏成功':"已取消");
					}
				}).catch(err=>{});
			},
			getDetails(id,castingId){
				getSeriesCollInfo({id:castingId}).then(res => {
					if(res.data.success){
						let obj = res.data.obj;
						this.itemDetails = obj;
					}
				});
				getGoodsDetail({id}).then(res => {
					if (res.data.success) {
						let data = res.data.obj;
						this.goodsId = data.id;
						this.userId = data.userId;
						this.pathId = data.castingId;
						this.getSeriesList();
						
						this.listQuery.detailId = data.castingInfoId;
						this.getRecordData();//流转记录
						if(data.issuerHead){
							data["issuerHeadList"] = ((data.issuerHead).split(',')).map(item => {
								item = this.pathImg + item;
								return item;
							});
							data["issuerHeads"] = data["issuerHeadList"][0];
						}
						if(data.describeFile){
							data["applyInfoList"] = ((data.describeFile).split(',')).map(item => {
								item = this.pathImg + item;
								return item;
							});
						}
						if(data.fileUrl){
							data.fileUrl = (this.pathImg + data.fileUrl);
						}
						
						if(data.coverImg){
							data.coverImg = this.pathImg + data.coverImg;
						}
						if(data.issuerName){
							data["issuerNameList"] = (data.issuerName).split(',');
							data["issuerNames"] = data["issuerNameList"][0];
						}
						if(data.label){
							if(data.label.indexOf(",") != -1){
								data["labelList"] = data.label.split(',');
							}else{
								let labelList = data.label.split('#');
								labelList = labelList.map(im=>{
									im = ("#" + im);
									return im;
								});
								data["labelList"] = labelList.filter((im,i)=>{
									return i>0;
								});
							}
						}
						data["isCollection"] = false;
						this.myGoodsDetails = data;
						this.moneyAll = data.price;
						countService({payingId:data.id}).then(res => {//服务费
							if (res.data.success) {
								let objs = res.data.obj;
								this.serviceCharge = objs;
								this.moneyAll = (objs.buyMoney + objs.buyIssueMoney + objs.buyCopyrightMoney + data.price);
							} else {
								
							}
						}).catch(err => {
							this.$u.toast('网络错误');
						});
					}else{
						
					}
				}).catch(err=>{});
			},
			// 判断这个地址是视频还是图片
			isImage(url) {
				if(url){
					let filePath = url.toLocaleLowerCase();
					if (filePath.indexOf(".mp4") != -1) {
						return false;
					} else {
						return true;
					}
				}else{
					return
				}
			},
			back() {
				this.move();
				let canNavBack = getCurrentPages();
				if(canNavBack && canNavBack.length>1) {
					if(this.setImgShow(this.myGoodsDetails) == 3){
						uni.switchTab({
							url:("/"+canNavBack[0].route)
						});
					}else{
						uni.navigateBack({
							delta: 1,
						});
					}
				} else {
				    history.back();  
				}
			},
			// 跳转到hoder
			goHolder(){
				// uni.navigateTo({
				// 	url:"/pages/detail/holderHome"
				// })
			},
			// 点击关注
			followClick(){
				// 1发售2抢购3转售4用户
				nftuserlike({id:this.userId,type:4}).then(res => {
					if (res.data.success) {
						this.followShow = false;
						this.$u.toast('关注成功');
					}else{
						
					}
				}).catch(err=>{});
			},
			confirm1(){
				// 1发售2抢购3转售4用户
				nftuserlike({id:this.goodsId,type:4}).then(res => {
					if (res.data.success) {
						this.followShow = true;
						this.showModal = false;
						this.$u.toast('已取消关注');
					}else{
						
					}
				}).catch(err=>{});
			},
			// 取消关注
			cancelFollow(){
				this.showModal = true;
			},
		},
		onUnload() {
			this.move();
		}
	}
</script>

<style lang="scss" scoped>
	.con-box {
		padding-bottom: 80upx;
		padding-top: 120upx;
		.shop-tipsBox{
			background-color: #fff;
			text-align: center;
			border-radius: 10upx;
			padding: 30upx 0;
			box-shadow: 0 0 6px 3px rgba(0,0,0,0.1);
			.tip-title{
				
			}
			.tip-text{
				padding: 0 58upx;
				margin-top: 40upx;
				.text{
					background-color: #2c1769;
					color: #fff;
					font-size: 24upx;
					line-height: 50upx;
					height: 50upx;
					border-radius: 6upx;
				}
			}
		}
		.model3dPopup{
			width: 96vw;
			height: 600upx;
			border-radius: 20upx;
			position: relative;
			overflow: hidden;
			.iframeBox{
				width: 100%;
				height: 100%;
				border-radius: 20upx;
				border: 0 none;
			}
		}
		.toastBox{
			position: fixed;
			top: 50%;
			left: 50%;
			z-index: 99999;
			width: auto;
			max-width: 600upx;
			font-size: 24upx;
			padding: 16upx 30upx;
			transform: translate(-50%,-50%);
			background-color: #000;
			border-radius: 10upx;
			color: #fff;
		}
		.modeTitle{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30upx;
			padding: 0 30upx;
			color: #fff;
			height: 100upx;
			background-color: #2C1769;
		}
		.payPasTitle{
			font-size: 40upx;
			color: #2C1769;
			position: relative;
			background-color: #fff;
			.closeIcon{
				position: absolute;
				top: 30upx;
				right: 30upx;
			}
			text{
				padding-top: 30upx;
				font-weight: 800;
				display: block;
				text-align: center;
			}
		}
		.shop-tips {
			background-color: #fff;
			min-height:760upx;
			position: relative;
			.step1{
				padding-top: 170upx;
				text{
					display: block;
					margin-top: 30upx;
					color: #333;
					font-size: 30upx;
				}
			}
			.step2{
				padding: 0 30upx;
				padding-bottom: 160upx;
				.tips{
					font-size: 24upx;
					color: #666;
					line-height: 34upx;
					margin-top: 22upx;
					margin-bottom: 10upx;
				}
				.itemBox{
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 64upx;
					font-size: 24upx;
					>view{
						color: #333;
						display: flex;
						align-items: center;
						justify-content: center;
						.iconfs{margin-left: 10upx;}
					}
					text{color: #999;}
				}
				.goods{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 26upx;
					.info{
						flex: 1%;
						text-align: left;
						display: flex;
						flex-wrap: wrap;
						align-content: space-between;
						min-height: 160upx;
						padding: 10upx 0;
						padding-left: 20upx;
						.name{
							font-size: 34upx;
							color: #111;
							width: 100%;
						}
						text{
							font-size: 24upx;
							color: #666;
						}
					}
					image{
						width: 160upx;
						height: 160upx;
						border-radius: 10upx;
					}
				}
				.items{
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 64upx;
					>text{
						font-size: 24upx;
						color: #333;
					}
					.address,.myMoney{
						color: #999;
						font-size: 24upx;
					}
					.price{
						font-size:30upx;
						color:#EB5703
					}
					.numb{
						display: flex;
						justify-content: flex-end;
						input{
							width: 50upx;
							font-size: 24upx;
							color: #333333;
							line-height: 40upx;
							height: 40upx;
							margin: 0 10upx;
						}
						text{
							font-size: 24upx;
							display: inline-block;
							width: 40upx;
							line-height: 40upx;
							height: 40upx;
							background-color: #666;
							color: #fff;
						}
					}
				}
			}
			.step3{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 50upx;
				margin-top: 100upx;
				
				.password {
					width: 100%;
					height: 100upx;
					position: relative;
					.flex{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.password_num {
							width: 100upx;
							height: 100upx;
							line-height: 100upx;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color:#999;
							.inputCont{
								display: flex;
								align-items: center;
								.miney_data {
									width: 20upx;
									height: 20upx;
									background-color: #000000;
									border-radius: 50%;
								}
							}
							
						}
					}
				}
			
				.password input {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
				}
			}
			
			.footBn{
				width: 100%;
				padding: 0 30upx;
				position: absolute;
				bottom: 40upx;
				left: 0;
				>view{
					font-size: 30upx;
					color: #fff;
					text-align: center;
					line-height: 80upx;
					height: 80upx;
				}
				.style1{
					background-color: #999;
				}
				.style2{
					background-color: #eb5703;
				}
			}
			.tip-image {
				width: 100%;
				text-align: center;
				image {
					width: 132upx;
					height: 132upx;
				}
			}
		}
		.prize {
			width: 100%;
			height: 680upx;
			position: relative;
			background: #fff;
			color: #333;
			.prizeTitle {
				width: 100%;
				height: 88upx;
				font-size: 30upx;
				font-family: Microsoft YaHei;
				background: #2c1769;
				font-weight: 400;
				padding-left: 30upx;
				color: #FFFFFF;
				line-height: 88upx;
				text-align: left;
			}
		
			.prizeBox {
				padding: 30upx 0 22upx 0;
				.msg {
					width: 100%;
					text-align: center;
					color: #999;
					font-size: 24upx;
					margin-top: 30upx;
					padding-bottom: 20upx;
				}
		
				.prizeList {
					padding: 0 30upx;
					// height: 100%;
					width: 100%;
					.noData{
						height: 100%;
						width: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						.noDataImg{
							width: 300upx;
						}
					}
					.codeItem{
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-bottom: 1px solid #F7F7F7;
						padding: 18upx 0;
						font-size: 24upx;
						.codeCont{
							>text{
								display: block;
								line-height: 24upx;
								margin-bottom: 10upx;
								color: #666;
							}
							.price{
								line-height: 24upx;
								color: #EB5703;
								>text{
									margin-left: 10upx;
									font-size: 18upx;
									line-height: 24upx;
								}
							}
						}
						.status{
							>text{
								display: inline-block;
								color: #fff;
								padding: 0 20upx;
								line-height: 38upx;
								text-align: center;
								height: 38upx;
								background: #EB5703;
								border-radius: 5upx;
							}
						}
						.status1{
							>text{
								display: inline-block;
								color: #fff;
								padding: 0 20upx;
								line-height: 38upx;
								text-align: center;
								height: 38upx;
								background: #999;
								border-radius: 5upx;
							}
						}
					}
					.prizeItem {
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-bottom: 1px solid #F7F7F7;
						padding: 18upx 0;
						font-size: 24upx;
						color: #333;
						.prizeRecord{
							display: flex;
							align-items: center;
							text{
								display: inline-block;
								height: 30upx;
								line-height: 30upx;
								background: #2C1769;
								border-radius: 15upx;
								font-size: 20upx;
								padding: 0 12upx;
								text-align: center;
								color: #fff;
								margin-right: 10upx;
							}
						}
						.prizeText1{
							padding-right: 38upx;
						}
						.nameCt{
							text-align: left;
							view{
								color: #666;
							}
						}
					}
				}
			}
		}
		.guanbi {
			width: 50upx;
			height: 50upx;
			position: absolute;
			top: 20upx;
			right: 20upx;
			background: url(../../static/user/guanbi.png) no-repeat center center;
			background-size: 100% 100%;
			z-index: 9999;
		}
		.buttnBox{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 130upx;
			.purchase{
				view{
					width: 70%;
					height: 70upx;
					text-align: center;
					background-color: #781f1f;
					color: #fff;
					line-height: 70upx;
					border-radius: 30upx;
					font-size: 24upx;
				}
			}
			.lineUp{
				view{
					width: 70%;
					height: 70upx;
					text-align: center;
					background-color: #444;
					border-radius: 30upx;
					line-height: 70upx;
					font-size: 24upx;
					color: #fff;
				}
			}
			>view{
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #fff;
			}
			.sell{
				button{
					width: 120upx;
					background-color: #1AB37D;
					font-size: 22upx;
					color: #fff;
					padding: 0;
					margin: 0;
					margin-left: 80upx;
				}
			}
		}
		.goods-image {
			width: 100%;
			position: relative;
			>view{
				width: 100%;
				height: 716upx;
				overflow: hidden;
				position: relative;
				.iframeBox{
					width: 100%;
					height: 100%;
					border: 0 none;
				}
				.model3d{
					position: absolute;
					bottom: 108upx;
					left: 50%;
					width: 100upx;
					margin-left: -50upx;
					z-index: 3;
				}
				.mask{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 2;
				}
			}
			.img {
				width: 100%;
				height: 100%;
				display: block;
			}
		
			.videoBox {
				width: 100%;
				display: block;
				height:716upx;
				max-height: 716upx;
				/deep/.uni-video-container{
					background-color: transparent;
				}
			}
		}
		.operating {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9;
			height: 132upx;
			background-color: #EB5703;
			color: #fff;
			.footBox{
				height: 100%;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 36upx;
				.shopping0{
					height: 62upx;
					border: 1px solid #FFFFFF;
					border-radius: 31upx;
					padding: 0 40upx;
					text-align: center;
					line-height: 62upx;
				}
				.shopping1{
					padding: 0 40upx;
					font-size: 29upx;
					height: 54upx;
					background: #B5B5B5;
					border-radius: 27upx;
					line-height: 54upx;
				}
				.footDate{
					font-size: 24upx;
					color: #fff;
					line-height: 24upx;
					text{
						display: block;
						line-height: 24upx;
						margin-top: 18upx;
					}
				}
				.shopping2{
					text-align: center;
					padding-top: 26upx;
					/deep/.u-count-down__text{
						color: #fff;
						font-size: 20upx;
					}
					.bt{
						padding: 0 40upx;
						font-size: 29upx;
						height: 54upx;
						background: #B5B5B5;
						border-radius: 27upx;
						line-height: 54upx;
					}
				}
				.priceCont{
					display: flex;
					align-items: center;
					.price{
						font-weight: 600;
						font-size:80upx;
						text{
							font-size: 44upx;
						}
					}
					.numb{
						padding-top: 40upx;
						font-size: 20upx;
						margin-left: 12upx;
					}
				}
			}
		}
		.goods-desc {
			width: 100%;
			height: auto;
			padding-bottom: 60upx;
			margin-top: -80upx;
			position: relative;
			z-index: 2;
			.image-desc {
				width: 100%;
				height: auto;
				background-color: #fff;
				padding-bottom: 42upx;
				margin-bottom:20upx;
				margin-top: 15upx;
				overflow: hidden;
				.title1{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding:0upx 30upx;
					padding-top: 32upx;
					padding-bottom: 36upx;
					.name{
						color: #111;
						font-weight: 800;
						font-size: 30upx;
					}
					.more{
						color: #666;
						font-size: 24upx;
					}
				}
				.circulationRecord{
					padding:0upx 30upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #F7F7F7;
					padding-bottom: 20upx;
					padding-top: 10upx;
					.lCont{
						display: flex;
						align-items: center;
						.tag{
							display: inline-block;
							padding: 0 12upx;
							height: 30upx;
							background: #2C1769;
							border-radius: 15upx;
							font-size: 20upx;
							line-height: 30upx;
							color: #fff;
							margin-right: 10upx;
						}
						.date{
							display: inline-block;
							font-size: 24upx;
							line-height: 24upx;
							color: #666;
						}
					}
					.rCont{
						display: inline-block;
						font-size: 24upx;
						line-height: 24upx;
						color: #666;
					}
					.lCont1{
						display: flex;
						flex-wrap: wrap;
						justify-content: flex-start;
						.name{
							width: 100%;
							display: inline-block;
							line-height: 24upx;
							color: #333;
							font-size: 24upx;
							margin-bottom: 10upx;
						}
						.date{
							display: inline-block;
							font-size: 24upx;
							line-height: 24upx;
							color: #666;
						}
					}
					.rCont1{
						display: inline-block;
						font-size: 24upx;
						line-height: 24upx;
						color: #333;
					}
				}
				.noBorder:last-child{
					border: 0 none;
					padding-bottom: 0;
				}

				.container{
					padding:30upx 30upx;
					border-bottom: 1px solid #F7F7F7;
					.name{
						padding-left: 10upx;
						color: #414141;
						font-size: 28upx;
						position: relative;
					}
					.name::after{
						content: "";
						display: block;
						position: absolute;
						top: 50%;
						left: 0;
						width: 6upx;
						height: 6upx;
						margin-top: -3upx;
						background-color: #EB5703;
						border-radius: 50%;
					}
					.contTxt{
						padding: 0 10upx;
						padding-top: 12upx;
						text-align: justify;
						font-size: 24upx;
						color:rgba($color: #414141, $alpha:0.54);
					}
				}
				.container:last-child{
					border: 0 none;
					padding-bottom: 0;
				}
				.title{
					font-size: 30upx;
					color: #111;
					font-weight: 800;
					padding:0upx 30upx;
					padding-top: 32upx;
					padding-bottom: 36upx;
				}
				.show-image {
					width: 100%;
					margin-bottom: 26upx;
					height: auto;
					padding:0upx 18upx;
					.img {
						width: 100%;
					}
				}
				.show-image:last-child{margin-bottom: 0;}
			}
			.scrollIssuer {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				margin-top: 15upx;
				background-color: #fff;
				padding:8upx 30upx;
				.holder-info {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					border-bottom: 1px solid #F7F7F7;
					padding-top: 26upx;
					padding-bottom: 16upx;
					.contLeft{
						display: flex;
						align-items: center;
						justify-content: flex-start;
					}
					.img {
						border-radius: 50%;
						height: 40upx;
						width: 40upx;
						box-shadow: 0 0 6px 3px rgba(0,0,0,0.1);
					}
					.desc {
						padding-left:10upx;
						.desc_1 {
							font-family: PingFang SC;
							font-size: 24upx;
							color: #414141;
							text{
								font-size: 18upx;
								background-color: #2b267f;
								color: #fff;
								display: inline-block;
								height: 24upx;
								padding: 0 12upx;
								line-height: 24upx;
								text-align: center;
								border-radius: 20upx;
								margin-left: 17upx;
							}
						}
										
						.desc_2 {
							font-family: PingFang SC;
							font-size: 16upx;
							color: rgba($color: #414141, $alpha: 0.42);
							width: 100%;
						}
					}
				}
				.holder-info:last-child{
					border: 0 none;
				}
			}
			.infoBox{
				margin-top: 15upx;
				background-color: #fff;
				padding:4upx 30upx;
				font-size: 24upx;
				>view{
					color: rgba($color: #414141, $alpha: 0.61);
					padding-top: 32upx;
					padding-bottom: 30upx;
					border-bottom: 1px solid #F7F7F7;
					text{
						color: #414141;
						margin-left: 38upx;
					}
				}
				.code{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.rCont{
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 24upx;
						color: #414141;
						text{margin-right: 10upx;}
					}
				}
				view:last-child{border: 0 none;}
			}
			.goods_details{
				text-align: center;
				position:relative;
				background-color: #fff;
				padding: 0 30upx;
				padding-bottom: 20upx;
				border-top-left-radius: 25upx;
				border-top-right-radius: 25upx;
				.title{
					display: flex;
					align-items: center;
					justify-content: flex-start;
					padding-top: 28upx;
					padding-bottom: 26upx;
					view{
						display: flex;
						align-items: center;
						justify-content: center;
						height: 100%;
						background: #e3e4e7;
						color: #666;
						font-size: 24upx;
						text-align: center;
						line-height: 32upx;
						padding: 0 15upx;
						margin-right: 30upx;
						.text{
							background: #f3f1f1;
							color: #EB5703;
							display: inline-block;
							height: 100%;
							padding: 0 16upx;
							margin-left: 15upx;
						}
					}
				}
				.name{
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					width:100%;
					margin-bottom: 30upx;
					text{
						flex: 1%;
						display: inline-block;
						text-align: left;
						font-size: 30upx;
						color:#111;
						padding-right: 84upx;
					}
					view{
						image{
							width:26upx;
						}
					}
					
				}
			}

		}
		.share-content {
			width: 100%;
			position: relative;
			.imgBlob {
				position: relative;
				width: 100%;
				height: 100%;
				z-index: 99;
				border-radius: 40upx;
				.msg {
					font-size: 24upx;
					font-weight: 400;
					color: #ffffff;
					text-align: center;
					opacity: 0.7;
					// margin-top: 20upx;
					position: absolute;
					width: 100%;
					left: 0;
					bottom: -60upx;
				}
			
				image {
					display: block;
					width: 100%;
					height: 100%;
					border-radius: 40upx;
				}
			
				.guanbi {
					width: 50upx;
					height: 50upx;
					position: absolute;
					top: 40upx;
					right: 40upx;
					background: url('https://hry-hyperchain-public.oss-cn-beijing.aliyuncs.com/file/hdStatic/user/guanbi.png') no-repeat center center;
					background-size: 100% 100%;
					z-index: 999;
				}
			}
		
			.detailBox {
				transition: all 0.3s;
				width: 100%;
				background-color:#fff;
				border-radius: 40upx;
				padding-bottom: 30upx;
				position: relative;
				z-index: 1;
				overflow: hidden;
				.cardBox {
					width: 100%;
					height: 560upx;
					margin-bottom:30upx;
					overflow: hidden;
					display: flex;
					align-items: center;
					border-top-left-radius: 40upx;
					border-top-right-radius: 40upx;
					image{
						display:block;
						width: 100%;
						height: 100%;
						margin: 0 auto;
					}
				}
		
				.info-box {
					width: 100%;
					padding: 0 30upx;
					.desc_1 {
						width: 100%;
						color: #333;
						.desc_1_1 {
							font-size: 30upx;
							width: 100%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							-o-text-overflow: ellipsis;
						}
		
						.desc_1_2 {
							margin-top: 20upx;
							display: inline-block;
							padding: 0 10upx;
							background: #3B3B3B;
							border-radius: 6upx;
							font-size: 20upx;
							height: 44upx;
							line-height: 44upx;
							color: #FBA05D;
						}
					}
		
					.desc_3 {
						.desc_3_2 {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 30upx;
							.headList {
								display: flex;
								align-items: center;
								.headItem {
									width: 40upx;
									height: 40upx;
									border-radius: 50%;
									overflow: hidden;
								}
								text{
									padding-left: 6upx;
									color: #666;
									font-size: 24upx;
								}
							}
		
							.source {
								margin-left: 10upx;
								color: #333;
								font-size: 24upx;
								text{
									font-size: 36upx;
								}
							}
						}
					}
		
					.desc_4 {
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						margin-top: 20upx;
						.logo{
							display: flex;
							justify-content: start;
							align-items: center;
							font-size: 26upx;
							.img{
								height: 40upx;
								margin-right: 10upx;
							}
						}
						
						.desc_4_2 {
							width: 180upx;
							display: flex;
							flex-direction: column;
							justify-content: center;
		
							.desc_4_2_1 {
								width: 138upx;
								height: 138upx;
								margin: 0 auto;
								padding: 2upx;
								background-color: #fff;
		
								image {
									width: 100%;
									height: 100%;
								}
		
								#qrcode {
									width: 134upx;
									height: 134upx;
								}
							}
						}
					}
				}
			}
		}
		.save-share {
			transition: all 0.3s;
			margin-top: 40upx;
			.shareTypeTitle{
				text-align: center;
				color: #fff;
				font-size: 32upx;
			}
			.shareType{
				display: flex;
				justify-content: center;
				justify-content: center;
				margin-top:40upx;
				>view{
					display: inline-block;
					text-align: center;
					margin: 0 40upx;
					image{
						height: 100upx;
					}
					view{
						line-height: 28upx;
						margin-top: 24upx;
						color: rgba(255,255,255,0.8);
						font-size: 28upx;
					}
				}
			}
		}
		.logoBox{
			width: 100%;
			height: 100%;
			.navBox{
				height: 120upx;
				background-image: url("@/static/common/bg1.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
			}
		}
		.icon-right{
			padding-top: 30upx;
			padding-right: 10upx;
			.backImg-right {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				image {
					width: 34upx;
					height: 30upx;
				}
				.share {
					width: 38upx;
					height: 38upx;
					margin-left: 20upx;
				}
			}
		}
		
	}
</style>
